<template>
  <div class="single-list-filter-wrapper" @click.stop="clickBlank()">
    <div class="top-text-wrapper" @click.stop="showSingleListDialog()">
      <p class="left-select-text">{{placeHolderText}}</p>
      <div class="arrow-down-img" :class="{'arrow-up-img': showDropDown}"/>
    </div>
    <div class="drop-down-wrapper-group" ref="doubleDown" v-show="showDropDown">
      <ul v-if="filter">
        <li v-for="(item,index) in dataList" class="group-parent-ul-wrapper">
          <div class="group-filter-parent">
            <check-box :checkDataItem="item" @checkListener="checkListener" ref="checkBoxParent"
                       :isParent="true"
                       :isBelongToParentWhich="index"
                       :onlyCode="getOnlyCode()"
                       :isParentLinkChild="isParentLinkChild">
            </check-box>
          </div>
          <div>
            <ul v-if="item.child" class="group-children-ul-wrapper">
              <li v-for="(itemChild,indexChild) in item.child">
                <div class="double-filter-object">
                  <check-box :checkDataItem="itemChild" @checkListener="checkListener"
                             :isParent="false"
                             :isBelongToParentWhich="index"
                             :onlyCode="getOnlyCode()"
                             :isParentLinkChild="isParentLinkChild">
                  </check-box>
                </div>
              </li>
            </ul>
          </div>
        </li>
      </ul>
      <div class="divider-line-filter"></div>
      <div class="confirm-btm-wrapper">
        <p class="double-confirm-btn" @click.stop="clickConfirm()">确定</p>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import CheckBox from './check-box/check-box.vue'
  import {bus} from './js/bus.js';
  const TAG = 'doubleCheckFilter'
  /**
   * 此组件用于分级列表显示，例如三级医院下有，对应的子医院
   */
  export default {
    components: {
      CheckBox
    },
    props: {
      isThreeBrokenLine: {
        // 是否是三条折线图
        type: Boolean,
        default() {
          return false
        }
      },
      isContrary: {
        // 一级标题是否与二级标题互斥
        type: Boolean,
        default() {
          return false
        }
      },
      isParentLinkChild: {
        // 一级标题是否与二级标题联动
        type: Boolean,
        default() {
          return false
        }
      },
      maxSelectHosNum: {
        // 选择医院的最大数量是多少
        type: Number,
        default() {
          return 3000
        }
      },
      doubleListData: {
        type: Array,
        default() {
          return []
        }
      },
      defaultText: {
        type: String,
        default() {
          return ''
        }
      },
      filter: {
        type: Object,
        default: null
      },
      type: {
        type: String,
        default: null
      }
    },
    created() {
      bus.$on('pageChange', () => {
        console.log('pageChange......uid===' + this._uid)
        this.showDropDown = false;
        this.clickConfirmBtn = false
        this.loadFilterData()
        setTimeout(() => {
          this.clickConfirm()
        }, 150)
      })
      bus.$on('filterIsShowing', (uid) => {
        if (this.showDropDown && uid == this.$parent._uid) {
          console.log('group-list-filter  ddddddddd111==')
          this.loadFilterData()
        }
      })
      bus.$on('showDropDownDialog', (emitTag) => {
        if (emitTag == this._uid) {
          // 显示待选项
          this.showDropDown = !this.showDropDown
          if (this.showDropDown) {
            this.loadFilterData();
          }
        } else {
          this.showDropDown = false
        }
      });
    },
    data() {
      return {
        placeHolderText: this.defaultText,
        currentSelectPosition: -1,
        showDropDown: false,
        firstItem: {},
        dataList: [],
        isSelectTotal: false
      }
    },
    methods: {
      getOnlyCode(){
        return this._uid
      },
      getIsChecked(item, isParent){
        if (this.isThreeBrokenLine) {
          if (isParent) {
            return true
          } else {
            return false
          }
        } else {
          if (item.selectId == '3') {
            return true
          }
        }
        return false
      },
      checkListener(self) {
        if (this.isContrary) {

        } else if (this.isParentLinkChild) {
//          console.log('当前所属子元素个数：' + this.getChildrenLengthByIndex(self.isBelongToParentWhich))
          if (this.dataList[self.isBelongToParentWhich].child.length === this.getChildrenLengthByIndex(self.isBelongToParentWhich)) {
            this.$refs.checkBoxParent[self.isBelongToParentWhich].setChecked(true)
          } else {
            this.$refs.checkBoxParent[self.isBelongToParentWhich].setChecked(false)
          }
        } else {
          let chooseList = this.getSelectItemList();
          console.log('当前选择的checkbox数量为：' + chooseList.length)
          if (chooseList.length > this.maxSelectHosNum) {
            self.setChecked(false)
          }
        }
      },
      selectCurrentSingleObject(item, index) {
        // 选择列表项目
        this.placeHolderText = item.name
        this.currentSelectPosition = index
      },
      showSingleListDialog() {
        // 通过发送时间消息显示当前下拉框，关闭其他下拉框
        bus.$emit('showDropDownDialog', this._uid)
      },
      clickConfirm() {
        let chooseList = this.getSelectItemList();
        if (chooseList.length > 0) {
          // 点击了确定标识
          this.clickConfirmBtn = true
          this.lastConfirmDataList = JSON.parse(JSON.stringify(this.dataList))
//          this.lastFirstItem = JSON.parse(JSON.stringify(this.firstItem))

          this.$emit('confirmDoubleSelect', chooseList);
          this.showDropDown = false;
        } else {
          this.$message({
            message: '医院等级不能为空',
            center: true,
            type: 'info',
          });
        }
      },
      getSelectItemList() {
        let chooseList = [];
        if (this.type == 'detailHospital') {
          this.dataList.forEach((item) => {
            if (item.checked) {
              chooseList.push(item.selectId)
            }
            if (item.child) {
              item.child.forEach((item1) => {
                if (item1.checked && item.selectId && item.selectId.length > 0) {
                  chooseList.push(item1.selectId)
                }
              })
            }
          });
        }
        return chooseList
      },
      getChildrenLengthByIndex(index) {
        // 获取二级标题选择的个数
        let chooseList = [];
        if (this.type == 'detailHospital') {
          if (this.dataList[index].child) {
            this.dataList[index].child.forEach((item) => {
              if (item.checked) {
                chooseList.push(item.selectId)
              }
            });
          }
        }
        return chooseList.length
      },
      clickBlank() {
      },
      getDataFromFilter() {
        if (this.type == 'detailHospital') {
          this.dataList = this.filter.nc.detailHospital;
          if (this.isThreeBrokenLine) {
            this.dataList.forEach((item, index) => {
              item.checked = true
            })
          } else {
            this.dataList.forEach((item, index) => {
              if (item.selectId == 3) {
                item.checked = true
                if (item.child) {
                  item.child.forEach((item1, index1) => {
                    item1.checked = true
                  })
                }
              } else {
                item.checked = false
                if (item.child) {
                  item.child.forEach((item1, index1) => {
                    item1.checked = false
                  })
                }
              }
            })
          }
          this.defaultDataList = JSON.parse(JSON.stringify(this.dataList))
        }
      },
      loadFilterData() {
        if (this.clickConfirmBtn) {
          this.dataList = []
          setTimeout(() => {
//                console.log('this.lastConfirmDataList==' + JSON.stringify(this.lastConfirmDataList))
            this.dataList = JSON.parse(JSON.stringify(this.lastConfirmDataList));
//            this.firstItem = JSON.parse(JSON.stringify(this.lastFirstItem))
//            this.$refs.totalCheckBox.setChecked(this.firstItem.checked)
//                console.log('this.dataList==' + JSON.stringify(this.dataList))
          }, 10)
        } else {
//              console.log('this.defaultDataList==' + JSON.stringify(this.defaultDataList))
          this.dataList = []
          setTimeout(() => {
            this.dataList = JSON.parse(JSON.stringify(this.defaultDataList));
//            this.firstItem = JSON.parse(JSON.stringify(this.defaultFirstItem))
//            this.$refs.totalCheckBox.setChecked(this.firstItem.checked)
          }, 10)
        }
      },
    },
    planAreaSelect(){
      this.clickConfirm()
    },
    mounted(){
      document.querySelector('body').addEventListener("click", () => {
        this.showDropDown = false
      });
      if (this.filter) {
        this.getDataFromFilter()
      }
//      console.log(JSON.stringify(this.dataList))
    },
    watch: {
      filter(val) {
        console.log('group-list-filter  filter发生变化')
        if (val) {
          this.getDataFromFilter()
        }
      }
    }
  };
</script>

<style lang="scss">
  @import "topFilter.css";

</style>
